<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="abc" @click="onClick">
        <span>张三</span>
        <span id="ls">李四</span>
        <input type="text" value="123">
    </div>

    <script>
        const list = [
            { id: 1, name: 'zs' },
            { id: 2, name: 'ls' },
            { id: 3, name: 'ww' },
        ];

        const vDOM = {
            tagName: 'div',
            attrs: {
                class: 'abc',
            },
            children: [
                {
                    tagName: 'span',
                    children: [
                        {
                            tagName: '',
                            content: '张三'
                        },
                    ],
                },
                {
                    tagName: 'span',
                    attrs: {
                        id: 'ls',
                    },
                    children: [
                        {
                            tagName: '',
                            content: '李四'
                        },
                    ],
                },
                {
                    tagName: 'input',
                    attrs: {
                        type: 'text',
                        value: '123',
                    },
                    key: 1,
                    vForData: list,
                },
                {
                    tagName: 'input',
                    attrs: {
                        type: 'text',
                        value: '123',
                    },
                    key: undefined,
                    vForData: list,
                },
                {
                    tagName: 'input',
                    attrs: {
                        type: 'text',
                        value: '123',
                    },
                    key: undefined,
                    vForData: list,
                },
            ],
            events: {
                click() {
                    console.log(123);
                },
            },
        };

        // diff算法
        // list[1].name = 'ls1'; // id:2

        // // vDOM: 虚拟DOM
        // function render(vDOM) {
        //     if (!vDOM.tagName) {
        //         return document.createTextNode(vDOM.content);
        //     }
        //     const DOM = document.createElement(vDOM.tagName);
        //     for (const attrKey in vDOM.attrs || {}) {
        //         DOM.setAttribute(attrKey, vDOM.attrs[attrKey]);
        //     }
        //     for (const child of vDOM.children || []) {
        //         const childDOM = render(child);
        //         DOM.appendChild(childDOM);
        //     }
        //     for (const eventName in vDOM.events) {
        //         const eventFn = vDOM.events[eventName];
        //         DOM.addEventListener(eventName, eventFn);
        //     }
        //     // 真实DOM
        //     return DOM;
        // }

        // document.body.appendChild( render(vDOM) );
    </script>
</body>
</html>
